<template>
    <div class="myheader">
        <div class="myheader_right">
            <p></p>
            <div class="info">
                <el-dropdown>
                    <span class="el-dropdown-link" style="outline: none">
                        <div
                            style="
                                display: flex;
                                align-items: center;
                                cursor: pointer;
                                outline: none;
                            "
                        >
                            <img
                                src="../assets/img/login_bg.png"
                                alt=""
                                style="
                                    height: 40px;
                                    width: 40px;
                                    border-radius: 100%;
                                "
                            />
                            <span style="color: #333">测试</span>
                            <i
                                class="el-icon-arrow-down el-icon--right"
                                style="font-size: 0.2rem"
                            ></i>
                        </div>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu
                            class="header_drop"
                            split-button
                            type="primary"
                            @click="handleClick"
                        >
                            <el-dropdown-item command="out"
                                >退出登录</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, h } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const handleClick = () => {
    ElMessageBox.alert("确认退出登录吗？", "提示", {
        confirmButtonText: "确定",
        callback: () => {
            router.push({ path: "/login" });
        },
    });
};
</script>

<style lang="scss" scoped>
.myheader {
    background-color: #fff;
    width: 100%;
    height: 60px;
    display: flex;
    font-size: 16px;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    z-index: 5;

    .info {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 35px;
        height: 100%;
        cursor: pointer;

        img {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            margin-right: 10px;
        }
    }
}

.myheader_left {
    height: 100%;
    width: 200px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
}

.myheader_right {
    width: 100%;
    flex: 1;
    height: 100%;
    padding-right: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.loginout {
    display: flex;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    padding: 0 8px;
}

.loginout:hover {
    background-color: #161d31;
    height: 100%;
}
</style>